<template>
  <view class="contenter">
    <view class="swiper-content">
      <view>
        <u-tabs-swiper :current="current" ref="tabs" height="102" inactive-color="#7b7b7b"
                       :list="list" :is-scroll="false" @change="tabsChange"
                       font-size="32" bar-height="10" bar-width="90"
                       :bar-style="{bottom:'0',background:'#45806E',borderRadius: '30rpx'}" :active-item-style="{color:'#45806E'}"
        ></u-tabs-swiper>
      </view>
      <view class="main u-flex">
        <!-- 左边选择栏 -->
        <scroll-view scroll-y="true" style="width: 30%;">
          <view class="service_l">
            <view class="list" :class="item.id == leftTabCurrent ? 'active' : ''"
                  v-for="(item,index) in classFiy" :key="index" @tap.stop="leftTabChange(item.id)">{{item.name}}</view>
          </view>
        </scroll-view>
        <scroll-view scroll-y style="width: 70%; box-sizing: border-box; padding: 0rpx 20rpx;" @scrolltolower="onreachBottom">
          <view class="service_r">
            <!--搜索-->
            <view class="search u-flex flex_j_c" @click="searchFous">
              <view class="u-flex flex_j_c"  v-if="!searchShow">
                <view class="icon">
                  <u-icon name="search"  color="#999999" size="30"></u-icon>
                </view>
                <view class="name">搜索</view>
              </view>
              <view v-if="searchShow">
                <u-input ref="child" :clearable="false" :focus="true" @confirm="orderSearch"  @blur="showSreach" v-model="search" placeholder="搜索" type="text" :border="false" :height="68" />
              </view>
            </view>
            <!--服务项目-->
            <view v-show="swiperCurrent == 0" class="serves">
              <view class="serve" v-for="(data,indexTwo) in dataList" :key="indexTwo">
                <view class="flex">
                  <item-image :img="data.image" :height="200" :width="200"></item-image>
                  <view class="flex top flex_bt flex-column">
                    <view class="name">{{data.name}}</view>
                    <view class="two-line-ellipsis content">{{data.describe}}</view>
                    <view class="u-flex">
                      <view class="price">￥{{data.price}}</view>
                    </view>

                  </view>
                </view>
                <view class="add u-flex">
                  <view v-if="data.snum!=0" class="left">可享用{{data.snum}}次</view>
                  <view @click="addShop(data,indexTwo)">
                    <u-image :src="`/static/icon/add.png`"  :height="40" :width="40" :fade="false"></u-image>
                  </view>
                </view>
              </view>
            </view>
            <!--氧发堂-->
            <view v-show="swiperCurrent == 1"  class="serves u-flex u-flex-wrap">
              <view class="list_yft" v-for="(data,index2) in dataList" :key="index2">
                <item-image :img="data.image" :height="174"  :radius="12"></item-image>
                <view class="list_yft_b">
                  <view class="name">{{data.name}}</view>
                  <view class="list_yft_b_b flex-r-b-c">
                    <view class="money_box">
                      <view class="present_price">¥<text>{{data.price}}</text></view>
                      <view class="original_price">原价<text>{{data.orginal_price}}</text></view>
                    </view>
                    <view @click="addShop(data,index2)">
                      <u-image :src="`/static/icon/add.png`"  :height="40" :width="40" :fade="false"></u-image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!--润肤清-->
            <view v-show="swiperCurrent == 2"  class="serves u-flex u-flex-wrap">
              <view class="list_yft" v-for="(data,index3) in dataList" :key="index3">
                <item-image :img="data.image" :height="174"  :radius="12"></item-image>
                <view class="list_yft_b">
                  <view class="name">{{data.name}}</view>
                  <view class="list_yft_b_b flex-r-b-c">
                    <view class="money_box">
                      <view class="present_price">¥<text>{{data.price}}</text></view>
                      <view class="original_price">原价<text>{{data.orginal_price}}</text></view>
                    </view>
                    <view @click="addShop(data,index3)">
                      <u-image :src="`/static/icon/add.png`"  :height="40" :width="40" :fade="false"></u-image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="u-flex flex_j_c">
              <view>{{text}}</view>
            </view>
          </view>

        </scroll-view>

      </view>

      <!--购物车-->
      <view class="shop u-flex flex_bt">
        <view class="u-flex">
          <view class="img" @click="shopCare">
            <u-image :src="`/static/icon/shop_car.png`"   :height="58" :width="58" :fade="false"></u-image>
            <view class="icon" v-if="shopIndex>0">{{shopIndex}}</view>
          </view>
        </view>
        <view class="bt" @click="xiadan">添加成功</view>
      </view>
    </view>
    <!-- 多规格弹框 -->
    <u-popup v-model="isDGGShow" height="50vh" :closeable="true" :customStyle="{bottom:'114rpx'}" border-radius="14"
             mode="bottom" @close="DGGPopupDlose">
      <view style="padding: 30rpx;">
        <view class="name">已选服务</view>
        <scroll-view scroll-y="true" style="height: 50vh; margin-top: 40rpx;">

          <view class="popup_list flex-r-b-c" v-for="(item,index) in DGGList" :key="index">
            <item-image :img="item.image" :height="140" :width="140"></item-image>
            <view class="popup_list_r">
              <view class="list_r_t flex-r-b-c">
                <view class="name">{{item.name}}</view>
                <view class="time" v-if="item.sminute != null">约{{item.sminute}}分钟</view>
              </view>

              <view class="list_r_b flex-r-b-c">
                <view class="popup_price">¥<text>0</text></view>

                <view class="popup_quantity flex-r-b-c">
                  <view class="reduce text" @click="endShop(item,2)">-</view>
                  <input type="number" class="quantity" :value="item.num" />
                  <view class="plus text" @click="addShopAdd(item,2)">+</view>
                </view>

              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 选择赠品 -->
    <u-popup v-model="isShowAll" length="600" :closeable="true" border-radius="14" mode="bottom">
      <view style="padding: 30rpx;">
        <view class="name">赠品列表</view>
        <scroll-view scroll-y="true" style="height: 50vhmargin-top: 40rpx;">
          <view class="popup_list flex-r-b-c" v-for="(data,index) in shopList" :key="index">
            <item-image :img="data.image" :height="140" :width="140"></item-image>
            <view class="popup_list_r">
              <view class="list_r_t flex-r-b-c">
                <view class="name">{{data.name}}</view>
              </view>
              <view class="list_r_b flex-r-b-c">
                <view class="popup_price">¥<text>0</text></view>
                <view class="popup_quantity flex-r-b-c">
                  <view class="reduce text" @click="endShop(data,1)">-</view>
                  <input type="number" class="quantity" :value="data.num" />
                  <view class="plus text" @click="addShop(data,1)">+</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>

export default {
  name: "index",
  data(){
    return{
      text:'',
      loadingText:'',
      leftTabCurrent: 1, // 左边 tab 下标
      shopList:[],//赠品list
      formList:[],//提交订单对象
      height:0,
      page:1,
      pageAll:1,
      pageAllList:'',
      allpage:'',
      categoryid:'',//分类id
      list: [],//分类
      dataList:[],//列表
      search:'',
      shopIndex:0,//商品数量
      isShow:false,
      isShowAll:false,//赠品
      searchShow:false,
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      show:false,
      showModal:false,//结束服务弹框控制
      isDGGShow: false, // 多规格显示
      DGGList: [], // 多规格数据
      classFiy:[],//二级分类数据

    }
  },
  onLoad(option){
    this.setData()
  },
  methods:{
    shopCare(){
      this.isShowAll = true
      this.isDGGShow = false
    },
    // 多规格弹框关闭
    DGGPopupDlose() {
      let that = this
      that.DGGList.filter(e => {
        e.num = 0
      })
    },

    setData(){
      //商品分类
      this.$api.getCategory().then(res => {
        this.list = res.data
        this.categoryid = this.list[0].id
        this.classFiy = this.list[0].cgoods
        this.leftTabCurrent =  this.list[0].cgoods[0].id
        this.searchList()
      })

    },
    //商品列表
    searchList(){
      let form = {
        category_id:this.categoryid,
        search:this.search,
        cid: this.leftTabCurrent,
        current_page:this.page,
        per_page:10,
      }
      let that = this
      this.$api.goodsList(form).then(res => {
        if(res.data.data.length <=0) this.text = '已经到底啦'
        this.allpage = res.data.last_page
        that.dataList = [...that.dataList,...res.data.data]
        that.dataList.map(data=>{
          data.num = 0
        })
      })
    },
    // scroll-view到底部加载更多
    onreachAll() {
      if(this.pageAll>=this.pageAllList){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.pageAll ++
      this.allList()
    },
    searchFous(){
      this.searchShow = true
    },
    //搜索
    orderSearch(){
      this.page =1
      this.dataList = []
      this.searchList()
    },
    // tabs通知swiper切换 请求数据
    tabsChange(index) {
      this.current = index;
      this.page =1
      this.dataList = []
      this.swiperCurrent = index;
      this.categoryid = this.list[index].id
      this.classFiy = this.list[index].cgoods
      this.leftTabCurrent = this.list[index].cgoods[0].id
      this.searchList()
    },
    // 左边 tab 切换
    leftTabChange(id){
      this.page = 1
      this.dataList = []
      this.leftTabCurrent = id
      this.searchList()
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.searchList()
    },
    //焦点失去后
    showSreach(){

      if(!this.search){
        this.searchShow = false
      }
    },
    xiadan(){
      uni.setStorage({
        key: 'zengpin',
        data: this.formList,
        success: function () {
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
        }
      });
      this.$u.route({
        type: 'back'
      });
    },
    //选择赠品
    changeZ(){
      this.isShowAll = true
    },
    // 点击添加购物车
    addShop(data) {
      let id = data.id
      let that = this
      that.$api.getSpe({
        id: id,
        not_num: 1,
      }).then(res => {
        if (res.data.length == 0) {
          this.addShopAdd(data)
        } else {
          that.isDGGShow = true
          that.DGGList = res.data
          that.DGGList.map(data=>{
            data.num = 0
          })

        }
      })
    },
    // 添加这个商品到购物车
    addShopAdd(data,index){
      data.num ++
      this.shopList.push(data)
      this.shopList = [...new Set(this.shopList )]
      this.shopIndex++
      this.formData()
    },
    // 减少这个商品的购物车数量
    endShop(data,indexTwo){
      data.num --
      let index = this.shopList.findIndex(item => item === data)
      this.shopList = [...this.shopList]
      //购物车只有一个的时候
      if(data.num == 0 ){
        this.shopList = []
        this.shopIndex = 0
        this.shopList.splice(index,1)
      }else {
        this.shopIndex--
      }
      this.formData()
    },
    //解析提交
    formData(){

      this.formList = this.shopList.map(res=>{
        let id  = ''
        let spe_id  = ''
        if(res.goods_id){
          id = res.goods_id
          spe_id = res.id
        }else {
          id = res.id
        }
        return {
          id: id, //商品ID
          num: res.num, //商品数量
          spe_id: spe_id //规格id
        }
      })
    },


  }
}
</script>

<style scoped lang="scss">


.swiper-content{
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  padding-bottom: 140rpx;
}
.swiper-box {
  flex: 1;
}

.con{
  padding: 30rpx 50rpx;
  .u-flex{
    font-size: 32rpx;
    color: #4b4b4b;
    margin-bottom: 40rpx;
  }
  .bt{
    margin: 50rpx 0 ;
  }

}
.main{
  // 内容区
  width: 100vw;
  margin-top: 20rpx;

  // 左边选择栏
  .service_l {
    height: calc(100vh - 88rpx - constant(safe-area-inset-bottom) - 134rpx);
    height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 134rpx);
    background-color: #FFFFFF;

    .list {
      width: 100%;
      height: 92rpx;
      line-height: 92rpx;
      text-align: center;
      color: #ACACAC;
      background-color: #FFFFFF;
      font-size: 28rpx;
      font-weight: 500;
    }

    .active {
      background-color: #557E6F;
      color: #FFFFFF;
    }
  }

  // 右边内容栏
  .service_r {
    height: calc(100vh - 88rpx - constant(safe-area-inset-bottom) - 154rpx);
    height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 154rpx);
    // 搜索框
    .search_box {
      width: 100%;
      height: 80rpx;
    }

    // 内容列表
    .list_box {
      width: 100%;

      .list {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 20rpx;
        margin-top: 20rpx;

        .list_t {
          position: relative;
          image {
            width: 200rpx;
            height: 200rpx;
          }

          .list_c {
            width: 50%;

            .name {
              color: #313131;
              font-size: 28rpx;
              font-weight: bold;
            }

            .introduce {
              margin-top: 20rpx;
              font-size: 22rpx;
              font-weight: 500;
              color: #777777;
            }

            .list_m {
              margin-top: 20rpx;

              .money {
                color: #FF6C1D;
                font-size: 20rpx;

                text {
                  font-size: 36rpx;
                }
              }

              .moneyH {
                margin-left: 6rpx;
                color: #C3C3C3;
                font-size: 20rpx;
                font-weight: 500;

                text {
                  font-size: 28rpx;
                  text-decoration: line-through;
                }
              }
            }
          }
        }

        .list_b {
          margin-top: 10rpx;

          image {
            margin-left: 20rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }

  .search{
    margin-top: 20rpx;
    height: 70rpx;
    width: 100%;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 0 32rpx;
    /deep/.u-input{
      width:750rpx;
      padding: 0 64rpx !important;
    }
    .name{
      font-size: 24rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }

}
.serves{
  margin-top: 20rpx;
}
.serve{
  padding: 28rpx 20rpx;
  background: white;
  margin-bottom: 20rpx;
  position: relative;
  padding-bottom: 80rpx;
  .top{
    margin-left: 20rpx;
  }
  .name{
    font-size: 36rpx;
    font-weight: bold;
    color: #3B3B3B;
  }
  .content{
    font-size: 24rpx;
    font-weight: 500;
    color: #777777;
  }
  .price{
    font-size: 42rpx;
    color: $uni-color-price;
    font-weight: bold;
  }
  .add{
    position: absolute;
    bottom: 24rpx;
    right: 40rpx;
    .left{
      margin-right: 20rpx;
    }
  }

}
.shop{
  height: 104rpx;
  background: white;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 0 32rpx;
  z-index: 99999;
  .img{
    position: relative;
    .icon{
      width: 32rpx;
      height: 32rpx;
      background: $uni-color-price;
      color: white;
      font-size: 20rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 32rpx;
      position: absolute;
      right: -10rpx;
      top: -12rpx;
    }
  }
  .bt{
    margin: 0;
    width: 228rpx;
  }
}
.popup_list {
  margin-bottom: 30rpx;

  image {
    width: 140rpx;
    height: 140rpx;
  }

  .popup_list_r {
    width: 75%;

    .list_r_t {
      .name {
        font-size: 36rpx;
        color: #4B4B4B;
        font-weight: 500;
      }

      .time {
        font-size: 22rpx;
        color: #555555;
        font-weight: 300;
      }
    }

    .list_r_b {
      margin-top: 40rpx;

      .popup_price {
        color: #FF6C1D;
        font-size: 32rpx;

        text {
          font-size: 40rpx;
          display: inline-block;
        }
      }

      .popup_quantity {
        .text {
          font-size: 40rpx;
        }

        input {
          width: 100rpx;
          text-align: center;
          background-color: #F2F2F2;
          font-size: 36rpx;
          margin: 0rpx 20rpx;
        }
      }
    }

    //
  }
}
.list_yft {
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  background-color: #FFF;
  margin-bottom: 30rpx;
  &:nth-child(2n+0){
    margin-right: 0;
  }
  .list_yft_b {
    box-sizing: border-box;
    padding: 20rpx;

    .name {
      font-size: 28rpx;
      font-weight: 800;
      color: #666666;
    }

    .list_yft_b_b {
      image {
        width: 44rpx;
        height: 34rpx;
      }

      .money_box {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        .present_price {
          color: #FF6C1D;
          font-size: 20rpx;
          display: flex;
          align-items: center;
          text {
            display: inline-block;
            font-size: 36rpx;
          }
        }

        .original_price {
          margin-left: 4rpx;
          color: #C3C3C3;
          font-size: 20rpx;

          text {
            display: inline-block;
            font-size: 28rpx;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
.pricein{
  font-size: 28rpx;
  font-weight: 500;
  color: #C3C3C3;
  text{
    font-size: 32rpx;
  }
}
.popup_list {
  margin-bottom: 30rpx;

  image {
    width: 140rpx;
    height: 140rpx;
  }

  .popup_list_r {
    width: 75%;
    box-sizing: border-box;
    padding-right: 40rpx;

    .list_r_t {
      .name {
        font-size: 36rpx;
        color: #4B4B4B;
        font-weight: 500;
      }

      .time {
        font-size: 22rpx;
        color: #555555;
        font-weight: 300;
      }
    }

    .list_r_b {
      margin-top: 40rpx;

      .popup_price {
        color: #FF6C1D;
        font-size: 32rpx;

        text {
          font-size: 40rpx;
          display: inline-block;
        }
      }

      .popup_quantity {
        .text {
          font-size: 40rpx;
        }

        input {
          width: 100rpx;
          text-align: center;
          background-color: #F2F2F2;
          font-size: 36rpx;
          margin: 0rpx 20rpx;
        }
      }
    }

    //
  }
}

</style>
